<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id="btn">得到所有的省份数据</button>
    <script>
      let req;
      function getRequestInfo() {
        const url = "https://cnodejs.org/api/v1/topics";
        // get请求参数一般放到地址上，post请求一般放在body中
        const config = {
          method: "get",
          headers: {
            "Content-Type": "application/json",
            a: 1,
            caches: "reload",
          },
          // body: JSON.stringify("a"),   // get/head中不能传递body，并且body类型需要和headers的content-type设置的类型一致
        };

        req = new Request(url, config);
        return req.clone(); // 克隆一个全新的request对象，尽量每一次请求都创建一个新的request对象。
      }

      async function getProvince() {
        const req = getRequestInfo();
        console.log("🚀 ~ getProvince ~ req:", req);
        const resp = await fetch(req);
        const pro = await resp.json();
        console.log(pro);
      }

      document.querySelector("#btn").onclick = function () {
        getProvince();
      };
    </script>
  </body>
</html>
